<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <meta content="telephone=no" name="format-detection" />
        <title>我的下级</title>
        <link href="{{asset('/mobile/css/style.css')}}" rel="stylesheet" type="text/css">
    </head>
    <style type="text/css">
        body{
            background-color: #F1F1F1;
        }
        input{
            border: none;
            outline: none;
        }
        .top-wrap{
            background-color: #D5D5D5;
            overflow: hidden;
            height: 3.6rem;
            box-sizing: border-box;
            padding: 0 0 0 1rem;
        }
        .inp-wrap{
            width: 80%;
            float: left;
            height: 2rem;
            border-radius: 2rem;
            background-color: #FFFFFF;
            margin-top: 0.8rem;
            position: relative;
        }
        .btn-search{
            width: 20%;
            float: right;
            height: 3.6rem;
            line-height: 3.6rem;
            text-align: center;
            color: #535353;
        }
        .inp-search{
            position: absolute;
            top: 50%;
            left: 2rem;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            width: 80%;
        }
        .mine{
            box-sizing: border-box;
            padding: 0.8rem 1rem;
            overflow: hidden;
            margin-bottom: 10px;
            background-color: #FFFFFF;
        }
        .mine-left{
            float: left;
        }
        .mine-right{
            float: right;
            color: #D74B2D;
        }
        .con{
        }
        .mine-icon{
            float: left;
            height: 1rem;
            margin-right: 5px;
        }
        .tag{
            border: 1px solid #D9D9D9;
            border-radius: 10px;
            background-color: #FFFFFF;
            width: 90%;
            margin: 0 auto;
            overflow: hidden;
            padding: 10px 0;
        }
        .portrait-wrap{
            float: left;
            width: 5rem;
            height: 6rem;
            text-align: center;
            padding-top: 10px;
            font-size: 0.9rem;
        }
        .portrait{
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            margin-bottom: 5px;
        }
        .detail{
            margin-left: 5rem;
        }
        .detail-li{
            margin: 10px 0;
        }
        .title{
            display: inline-block;
            width: 5rem;
        }
        .value{
            display: inline-block;
        }
        .red{
            color: #D42400;
        }
        .btn-wrap{
            width: 100%;
            display: flex;
            justify-content: center;
            margin-bottom: 6px;
        }
        .btn{
            flex: auto;
            margin: 0 5px;
        }
        .btn img{
            width: 100%;
        }
        .btn2{
            flex: 0 0 30%;
            margin: 0 5px;
        }
        .btn2 img{
            width: 100%;
        }
    </style>
    <body>
        <div class="top-wrap">
            <form action="/mobile/agent/my_son/{{$agent->id}}" method="GET">
                <div class="inp-wrap">
                    <input type="text" name="keywords" class="inp-search" id="inpSearch" placeholder="请输入关键字" />
                </div>
                <div class="btn-search" id="search">搜索</div>
            </form>    
        </div>
        <div class="mine">
            <img class="mine-icon" src="{{asset('/imgs/yinpiao.png')}}"/>
            <div class="mine-left">我的银票</div>
            <div class="mine-right">{{$agent->user()->gems}}</div>
        </div>
        <div class="con">
            @foreach($users as $user)
                <div class="tag">
                    <div class="portrait-wrap">
                        <img class="portrait" src="{{$user->avatar}}"/>
                        <div>{{$user->realname}}</div>
                    </div>
                    <div class="detail">
                        <div class="detail-li">
                            <div class="title">推广编号:</div>
                            <div class="value">{{$user->id}}</div>
                        </div>
                        <div class="detail-li">
                            <div class="title">分成说明:</div>
                            <div class="value red"><span style="font-size: 10px;color: #3c8dbc" onclick="window.location.href='/mobile/agent/divide_explain'">比例：{{$user->divide}}%，1张银票分{{0.5*$agent->divide/100*$user->divide/100}}元</span></div>
                        </div>
                        <div class="detail-li">
                            <div class="title">发展用户:</div>
                            <div class="value red">{{$user->users->count()}}</div>
                        </div>
                        <div class="detail-li">
                            <div class="title">用户消费:</div>
                            <div class="value red">￥{{$user->sonCost()}}</div>
                        </div>
                        <div class="detail-li">
                            <div class="title">电&emsp;&emsp;话:</div>
                            <div class="value red">{{$user->mobile}}</div>
                        </div>
                    </div>
                    <div class="btn-wrap">
                        <div data-id="1" class="btnClick btn" onclick="window.location.href='/mobile/agent/first_card/{{$user->id}}'"><img src="{{asset('/imgs/btn_fpyp.png')}}"/></div>
                        <div data-id="2" class="btnClick btn" onclick="window.location.href='/mobile/agent/first_log/{{$user->id}}'"><img src="{{asset('/imgs/btn_fpjl.png')}}"/></div>
                        <div data-id="4" class="btnClick btn" onclick="window.location.href='/mobile/agent/edit_divide/{{$user->id}}'"><img src="{{asset('/imgs/btn_xgfc.png')}}"/></div>
                    </div>
                    <div class="btn-wrap">
                        @if($user->user()->agent != 1)
                            <div data-id="3" class="btnClick btn2" onclick="window.location.href='/mobile/agent/open_club/{{$user->id}}'"><img src="{{asset('/imgs/btn_qyq.png')}}"/></div>
                        @endif
                        @if($user->open_circle != 1)
                            <div data-id="5" class="btnClick btn2" onclick="funQyq('{{$user->id}}', this)"><img src="{{asset('/imgs/btn_hyqyq.png')}}"/></div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    <script type="text/javascript" src="{{asset('/mobile/js/jquery-1.8.3.min.js')}}"></script>
    <script src="{{asset('/js/layer_mobile/layer.js')}}" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="{{asset('/js/Inertia.js')}}"></script>
    <script type="text/javascript" src="{{asset('/js/backHome.js')}}"></script>
    <script type="text/javascript">
        $('#search').click(function() {
            var searchStr = $('#inpSearch').val()
            if (!searchStr) {
                alert('请输入搜索内容')
            } else {
                console.log('搜索' + searchStr)
            }
        })
        $('.btn').on('touchstart', function() {
            // 点击效果
            var img = $(this).find('img')
            var oldSrc = img.attr('src')
            var newSrc = oldSrc.replace('.png','_y.png')
            img.attr('src', newSrc)
        })
        $('.btn').on('touchend', function() {
            // 点击效果
            var img = $(this).find('img')
            var oldSrc = img.attr('src')
            var newSrc = oldSrc.replace('_y.png','.png')
            img.attr('src', newSrc)
        })
        $('.btnClick').on('click', function() {
            var myid = $(this).attr('data-id')
            console.log(myid)
            switch (myid){
                case '1':
                    break;
                case '2':
                    break;
                case '3':
                    break;
                case '4':
                    break;
                default:
                    break;
            }
        })
        function funQyq(id, dom) {
            layer.open({
                content: '确定要开启会员亲友圈吗?',
                btn: ['确定', '取消'],
                no: function(index) {
                    layer.close(index);return;
                },
                yes: function(index){
                    layer.close(index);
                    $.ajax({
                      type: "get",
                      dataType: "json",
                      url: '/mobile/agent/open_friend_cricle/'+id,
                      data: {},
                      success: function (data) {
                        if (data.flag) {
                            dom.remove();
                            layer.open({
                                content: '成功开启'
                                ,skin: 'msg'
                                ,time: 1
                            });
                            return;
                        }
                      }
                    }); 
                }
            });
        }
    </script>
    </body>
</html>
